<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->

      <TreeTools :show-dialog.sync="showDialog" :tree-node="departTitle" :is-root="true" @addSubdepartment="addSubdepartment" />

      <hr>
      <el-tree :data="depart" :props="defaultProps" default-expand-all>
        <template #default="scope">
          <TreeTools
            :tree-node="scope.data"
            :is-root="false"
            @addSubdepartment="addSubdepartment"
            @removeSection="departmentsList"
            @EditorialDepartment="EditorialDepartment"
          />
        </template>
      </el-tree>
    </el-card>
    <Additional ref="edit" :node-data="treeNode" :show-dialog.sync="showDialog" @editdata="departmentsList" />
  </div>

</template>

<script>
import { getdepartment } from '@/api/department'
import { statisticalData } from '@/utils'
import TreeTools from './component/tree-tools'
import Additional from './component/Additional.vue'
export default {

  components: { TreeTools, Additional },
  props: {},

  data() {
    return {
      departTitle: { name: ' 北京田米科技股份有限公司 ', manager: '负责人', id: '' },

      depart: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false,
      treeNode: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.departmentsList()
  },
  mounted() {},
  methods: {
    async departmentsList() {
      const res = await getdepartment()

      this.depart = statisticalData(res.depts, '')
    },
    addSubdepartment(value) {
      this.showDialog = true
      this.treeNode = value
    },
    EditorialDepartment(nodeData) {
      this.showDialog = true
      this.treeNode = nodeData// 点击编辑存起来当前点击的数据
      this.$refs.edit.Editorial(nodeData.id)
    }

  }
}
</script>

<style scoped lang="scss">
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 20px;
    line-height: 46px;
  }
}
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
}
</style>

